<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank"  class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank"  class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank"  class="icon_edit_white"></a>
        <a target="_blank"  class="icon_top_white mt10"></a>
    </div>
</div>
<div class="shop_car container" v-cloak="">
    <h2>填写并核对订单信息</h2>
    <div class="content">
        <div class="title">商品清单</div>
        <div class="list">
            <table>
                <thead>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>操作</td>
                </thead>
                <tbody v-for="items in list">
                <tr>
                    <td colspan="4">
                        <i class="icon_store"></i>
                        {{items.storeName}}
                    </td>
                </tr>
                <tr class="thing" v-for="item in items.list">
                    <td>
                        <i class="icon_checkbox" :commodityId="item.commodityId"></i>
                        <img v-for="(it,index) in item.picUrl" v-if="index == 0" :src="imgBaseUrl + it" alt="">
                        <span>{{item.name}}</span>
                    </td>
                    <td class="price">¥ {{item.price}}</td>
                    <td>
                        <div class="computed">
                            <i class="icon_minus" :commodityId="item.commodityId"></i>
                            <input type="text" :value="item.count" :id="item.commodityId">
                            <i class="icon_plus" :commodityId="item.commodityId"></i>
                        </div>
                    </td>
                    <td>
                        <div class="button" @click="delShop(item.commodityId)">删除</div>
                    </td>
                </tr>
                <tr class="total_box">
                    <td colspan="4">
                        <i class="icon_checkbox"></i> 全选
                        <div class="submit">去结算</div>
                        <div class="total">总计（不含运费）：<span class="c_red">¥ 0</span></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="footer_01">
    <div class="container clearfix">
        <ul>
            <li>
                <img src="../img/footer_01.png" alt="">
                <div class="box">
                    <span>质量保障</span><br>
                    <i>正规渠道，质量保障</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_02.png" alt="">
                <div class="box">
                    <span>品类齐全</span><br>
                    <i>各大车系千万配件，一站购齐</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_03.png" alt="">
                <div class="box">
                    <span>全网低价</span><br>
                    <i>源头直达，价格大幅优于传统渠道</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_04.png" alt="">
                <div class="box">
                    <span>售后无忧</span><br>
                    <i>安心选购，品牌保障，售后无忧</i>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="../js/config.js"></script>
<script>

    var limit = 10;
    var offset = 1;
    var count;

    var app = new Vue({
        el: '.shop_car',
        data: {
            imgBaseUrl: imgBaseUrl,
            list:[]
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("/sys/car/getCarList", {}, function (data) {
                data.forEach(function (items) {
                    items.list.forEach(function (item) {
                        item.picUrl = item.picUrl.split(",");
                    })
                })
                that.list = data;
            })
        },
        updated: function () {

        },
        methods: {
            delShop:function (commodityId) {
                get_confirm("确认删除该商品吗？",function () {
                    get_ajax("/sys/car/delCar", {commodityId:commodityId}, function (data) {
                        layer.msg("删除成功")
                        get_ajax("/sys/car/getCarList", {}, function (data) {
                            app.list = data;
                        })
                    })
                })
            }
        },
    })

    //修改购物车数量
    $("body").on("click",".computed i",function () {
        var commodityId = $(this).attr("commodityId");
        var count = $("#"+commodityId).val();
        var $tbody = $(this).parents("tbody");
        get_ajax("/sys/car/editCar", {commodityId:commodityId,count:count}, function (data) {
            get_price($tbody)
        });
    })

    //全选
    $("body").on("click",".total_box .icon_checkbox",function () {
        if($(this).hasClass("active")){
            $(this).parents("tr").siblings(".thing").find(".icon_checkbox").addClass("active");
        }else{
            $(this).parents("tr").siblings(".thing").find(".icon_checkbox").removeClass("active");
        }
        get_price($(this).parents("tbody"));
    })

    //勾选全选
    $("body").on("click",".thing td .icon_checkbox",function () {
        var $tbody = $(this).parents("tbody");
        var allLength = $tbody.find(".thing").length;
        var checkLength = $tbody.find(".thing .icon_checkbox.active").length;
        var allCheck = $tbody.find(".total_box .icon_checkbox");
        allLength == checkLength?allCheck.addClass("active"):allCheck.removeClass("active");
        get_price($tbody);
    })
    //价格计算
    function get_price($tbody) {
        var totalPrice = 0;
        $tbody.find(".thing").each(function () {
            if ($(this).find(".icon_checkbox").hasClass("active")){
                var price = Number($(this).find(".price").text().substr(1,$(this).find(".price").text().length) * $(this).find(".computed input").val());
                totalPrice += price;
            }
        })
        $tbody.find(".total_box .total .c_red").text("￥"+totalPrice);
    }

    //下单页跳转
    $("body").on("click",".submit",function () {
        var commodityIds = [];
        $(this).parents("tbody").find(".thing .icon_checkbox.active").each(function () {
            commodityIds.push($(this).attr("commodityId"));
        })
        if(commodityIds.length > 0){
            location.href = "choose_area.html?commodityIds=" + commodityIds.toString();
        }else{
            layer.msg("请选择商品！");
        }

    });
</script>
</body>
</html>